<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>问卷调查</title>
    <link type="text/css" rel="stylesheet" href="lib/jquery/themes/default/easyui.css">
    <link type="text/css" rel="stylesheet" href="lib/jquery/themes/icon.css">
    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/jquery/jquery.easyui.min.js"></script>
</head>
<body style="width: 100vw;height: 100vh">
<style>
    body, html {
        padding: 0;
        margin: 0;
    }

    .subject {
        margin-top: 10px;
        margin-left: 5px;
    }

    .center {
        margin-left: calc(50vw - 200px);
    }

</style>
<div class="easyui-layout" style="width:100%;height:100%;">
    <div region="west" split="true" title="导航" style="width:300px;">
        <div class="easyui-accordion" style="width:100%;height:100%;">
            <div title="满意度调查" data-options="iconCls:'icon-help'" style="overflow:auto;padding:10px;">
                <ul class="easyui-tree" data-options="onClick:show" id="tree">
                    <li>
                        <span>宅基地登记满意度调查</span>
                    </li>
                </ul>
            </div>
            <div title="政策合理调查" data-options="iconCls:'icon-help'" style="padding:10px;">
            </div>
            <div title="宅基地调查" data-options="iconCls:'icon-help'" style="padding:10px;">

            </div>
        </div>

    </div>
    <div id="content" region="center" title="问卷调查" style="padding:5px;">
        <div class="paper" style="display: none">
            <div class="subject"><span>1.</span><span>你对本次登记过程中工作人员的服务态度</span><br>
                <label><input name="1" type="radio" value="0"/>不满意 </label>
                <label><input name="1" type="radio" value="1"/>基本满意 </label>
                <label><input name="1" type="radio" value="2"/>较为满意 </label>
                <label><input name="1" type="radio" value="3"/>非常满意 </label>
            </div>
            <div class="subject"><span>2.</span><span>本次登记过程中工作人员的是否耐心细致</span><br>
                <label><input name="2" type="radio" value="0"/>是 </label>
                <label><input name="2" type="radio" value="1"/>否 </label>
            </div>
            <div class="subject"><span>3.</span><span>本次登记过程中工作人员的的说明是否详细</span><br>
                <label><input name="3" type="radio" value="0"/>不详细 </label>
                <label><input name="3" type="radio" value="1"/>一般 </label>
                <label><input name="3" type="radio" value="2"/>详细 </label>

            </div>
            <div class="subject"><span>4.</span><span>你对本次总体的满意态度</span><br>
                <label><input name="Fruit" type="radio" value="0"/>不满意 </label>
                <label><input name="Fruit" type="radio" value="1"/>基本满意 </label>
                <label><input name="Fruit" type="radio" value="2"/>较为满意 </label>
                <label><input name="Fruit" type="radio" value="3"/>非常满意 </label>
            </div>
            <div style="text-align:center;padding:5px;position: absolute;bottom: 0;left: 500px;">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
            </div>
        </div>
    </div>
</div>
<div id="dd" class="easyui-dialog" title="提交" closed="true"
     style="width:100px;height:80px;line-height: 40px;text-align: center"
     data-options="iconCls:'icon-ok',modal:true,onClose:hide">
    提交成功
</div>
<script>
    function submitForm() {
        $("#dd").dialog('open');
    }

    function clearForm() {
        $('#ff').form('clear');
    }

    function show() {
        $(".paper").show();
    }

    function hide() {
        $(".paper").hide();
        $("#tree").tree("loadData", [{
            "id": 1,
            "text": "宅基地登记满意度调查",
            "iconCls": "icon-ok"
        }])
    }
</script>
</body>
</html>